<div>
  <div>
    <div
      v-for="(position,$index) in positions"
      :key="$index"
      class="panel panel-default"
    >
      <div
        :data-target="'#J_Position_' + position.name + $index"
        class="panel-heading clickable"
        data-toggle="collapse"
      >
        <h4 class="panel-title" style="word-break: break-all;">
          {{Kooboo.text.site.page.position + ': ' + position.name}}
          <small v-if="position.fromLayout"
            >{{ ' (' + Kooboo.text.site.page.fromLayout + ': ' +
            position.layoutName + ')'}}</small
          >
        </h4>
      </div>
      <div
        :id="'J_Position_' + position.name + $index"
        class="panel-collapse collapse in"
      >
        <ul
          v-kb-sortable="position.contents"
          @after-sort="onSorted(position.contents)"
          class="list-group ui-sortable"
        >
          <li
            class="list-group-item"
            v-for="($data,index) in position.contents"
            :key="index"
          >
            <span class="sortable ui-sortable-handle"
              ><i class="glyphicon glyphicon-list"></i
            ></span>
            <a
              href="javascript:;"
              @click="remove(position, $data.id,$data)"
              class="btn gray btn-xs pull-right"
              ><i class="fa fa-minus"></i
            ></a>
            <a
              class="label label-sm kb-table-label-refer pull-right margin-right-5"
              :style="{background:Kooboo.getLabelColor($data.type)}"
              >{{Kooboo.text.component.table[$data.type.toLowerCase()]}}</a
            >
            <span
              class="nowrap-text"
              @click="showContent($data)"
              v-html=" $data.name || '&nbsp;'"
            ></span>
          </li>
        </ul>
        <div class="buttons text-right">
          <div class="btn-group">
            <button
              data-toggle="dropdown"
              class="btn blue btn-xs pull-right dropdown-toggle"
            >
              <i class="fa fa-plus"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-right">
              <li v-for="($data,index) in components" :key="index">
                <a href="javascript:;" @click="chooseComponent(position, $data)"
                  >{{$data.displayName}}</a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
